<template>
	<view>
		<block v-if="check">
			<web-view src="https://alumni.snare.org.cn:8093"></web-view>
		</block>
		<block v-else>
			<form @submit="submit">
				<view class="cu-form-group">
					<input name="title" placeholder="请输入标题" :value="formData.title"></input>
				</view>
				<view class="cu-form-group">
					<textarea name="content" maxlength="500" placeholder="说点什么吧,万一火了呢"
						:value="formData.content"></textarea>
				</view>
				<view class="cu-bar bg-white">
					<view class="action">
						图片上传
					</view>
					<view class="action">
						{{formData.mediaList.length}}/9
					</view>
				</view>
				<view class="cu-form-group">
					<view class="grid col-3 grid-square flex-sub">
						<view class="bg-img" v-for="(item,index) in formData.mediaList" :key="index"
							@tap="ViewImage(index)" :data-url="item.previewUrl">
							<image :src="item.previewUrl" mode="aspectFill"></image>
							<view class="cu-tag bg-red" @tap.stop="DelImg" :data-index="index">
								<text class='cuIcon-close'></text>
							</view>
						</view>
						<view class="solids" @tap="ChooseImage" v-if="formData.mediaList.length<9">
							<text class='cuIcon-cameraadd'></text>
						</view>
					</view>
				</view>
				<view class="padding flex flex-direction apply-btn">
					<button class="cu-btn bg-red margin-tb-sm lg" :disabled="hasDisabled" form-type="submit">发表</button>
				</view>
			</form>
		</block>
	</view>
</template>

<script>
	import {
		serviceUrl
	} from '@/common/config.js'
	import {
		trend_publish
	} from '@/common/api/api.js';

	export default {
		computed: {
			hasDisabled() {
				// return this.formData.content ? true : false
				return false
			}
		},
		data() {
			return {
				check: getApp().globalData.check,
				formData: {
					content: "",
					mediaList: [],
				}
			};
		},
		methods: {
			ChooseImage() {
				if (this.formData.mediaList.length === 9) {
					return
				}
				uni.chooseImage({
					success: (res) => {
						const tempFilePaths = res.tempFilePaths;
						uni.uploadFile({
							url: serviceUrl + 'api/oss/upload',
							filePath: tempFilePaths[0],
							name: 'file',
							success: (uploadFileRes) => {
								if (uploadFileRes.statusCode === 200) {
									let result = JSON.parse(uploadFileRes.data).result
									// let img = {
									// 	fileId: result.fileId,
									// 	previewUrl: result.previewUrl
									// }
									this.formData.mediaList = this.formData.mediaList.concat(
										result)
								}
							}
						});
					}
				});;
			},
			ViewImage(index) {
				let urlArr = []
				this.formData.mediaList.forEach(item => {
					urlArr.push(item.previewUrl)
				})
				uni.previewImage({
					urls: urlArr,
					current: index
				});
			},
			DelImg(e) {
				uni.showModal({
					title: '提示',
					content: '确定要删除这张图片吗？',
					cancelText: '取消',
					confirmText: '确定',
					success: res => {
						if (res.confirm) {
							// let img = this.formData.mediaList[e.currentTarget.dataset.index]
							this.formData.mediaList.splice(e.currentTarget.dataset.index, 1)
						}
					}
				})
			},
			submit(e) {
				var formdata = e.detail.value
				formdata.mediaList = this.formData.mediaList
				if (!formdata.title && !formdata.content) {
					uni.showToast({
						icon: 'none',
						title: "请输入动态内容"
					})
					return
				}
				trend_publish(formdata).then(res => {
					if (this.$s.suc(res)) {
						uni.showToast({
							icon: 'success',
							title: "发布成功",
							success() {
								uni.navigateBack()
							}
						})
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background-color: white;
	}

	.cu-form-group .title {
		min-width: calc(4em + 15px);
	}

	.apply-btn {
		position: fixed;
		width: 100%;
		bottom: 0;
		z-index: 1024;
	}
</style>